# Secondary Primitives

## useComputed

Creates a reactive computation that runs immediately and re-executes when dependencies change. The function receives its previous return value and is designed for side effects that update reactive state. Unlike `useMemo`, it doesn't return a value, and unlike `useEffect`, it runs synchronously during rendering, which may cause excessive updates.

**Type:**

```ts
useComputed<T>(fn: Callback<T>, value?: T): void
```

**Parameters:**

- `fn`: A function that computes the derived value. It receives the previous computed value as an argument
- `value`: Optional initial value

**Example:**

```jsx
const [count, setCount] = useSignal(10)

useComputed(() => {
  console.log(`Computed double: ${count() * 2}`)
})
```

## useRenderEffect

Creates a render effect that runs synchronously during rendering, before DOM updates complete. Unlike `useEffect`, it executes immediately when DOM elements may not be ready and refs aren't set. Reactive updates are batched automatically.

**Type:**

```ts
useRenderEffect<T>(fn: Callback<T>, value?: T): void
```

**Parameters:**

- `fn`: A function that executes synchronously during rendering, receiving the previous return value
- `value`: Optional initial value

**Example:**

```jsx
function TextInput() {
  const [text, setText] = useSignal('')

  useRenderEffect(() => {
    console.log('Text changed:', text())
  })

  return <input value={text()} onInput={(e) => setText(e.target.value)} />
}
```

## useSelector

Creates an optimized conditional selector that efficiently manages subscriptions by only notifying subscribers when their specific key starts or stops matching the source value. This optimization drastically improves update performance by minimizing the number of subscribers that need to be notified when the source value changes.

**Type:**

```ts
useSelector<T, U = T>(source: Getter<T>, fn?: Equals<T, U>): (key: U) => boolean
```

**Parameters:**

- `source`: A getter function that returns the source value to compare against keys
- `fn`: Optional custom equality function that receives a key and the source value, returning whether they should be treated as equal. Defaults to strict equality (`===`)

**Returns:** A function that takes a key and returns whether it matches the current source value

**Example:**

```jsx
function SelectableItemList() {
  const [selectedIndex, setSelectedIndex] = useSignal(0)
  const items = useSignal([0, 1, 2])
  const isActive = useSelector(selectedIndex)

  return (
    <For each={items()}>
      {(index) => (
        <div
          class={{ active: isActive(index) }}
          onClick={() => setSelectedIndex(index)}
        >
          Item {index + 1}
        </div>
      )}
    </For>
  )
}
```
